[HTML 5]
Not a member of Pastebin yet? Sign Up, it unlocks many cool features! <div></div>
<footer>
<div>
<div>
<div>
<div>
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='http://www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t20.7;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0'><\/a>")
//--></script><!--/LiveInternet-->
</div>
<div></div>
</div>
<ul>
<li><a href="http://камедивумен.рф">Главная</a></li>
<li><a href="http://камедивумен.рф/girl">Участницы</a></li>
<li><a href="http://камедивумен.рф/vipuski">Выпуски</a></li>
<li><a href="http://камедивумен.рф/contact">Контакты</a></li>
</ul>
</div>
<div>
<div>© 2012 <a href="/">Камедивумен.рф</a> <br /> Лучшее женское комедийное шоу</div>
<div>
<p><b>Made in Woman</b> — это не Comedy Club и, тем более, не «женский Comedy Club». Это вообще не stand-up, а совсем другой жанр, скорее — эстрадный. Это ярко, громко и весело. Помните, были такие понятия: «эстрадный артист», «звезда эстрады», «театр эстрадных миниатюр»? Эстрада — это не человек у микрофона с монологом или набором шуток, точнее, не только он. Это ещё и танцы, песни, переодевания, фокусы, в конце концов! В «Made in Woman» есть шутки, над которыми нужно подумать, и есть чисто клоунская эксцентрика.</p>
</div>
</div>
</div>
<div></div>
</footer>
</body>
</html>
<div></div>
<footer>
<div>
<div>
<div>
<div>
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='http://www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t20.7;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0'><\/a>")
//--></script><!--/LiveInternet-->
</div>
<div></div>
</div>
<ul>
<li><a href="http://камедивумен.рф">Главная</a></li>
<li><a href="http://камедивумен.рф/girl">Участницы</a></li>
<li><a href="http://камедивумен.рф/vipuski">Выпуски</a></li>
<li><a href="http://камедивумен.рф/contact">Контакты</a></li>
</ul>
</div>
<div>
<div>© 2012 <a href="/">Камедивумен.рф</a> <br /> Лучшее женское комедийное шоу</div>
<div>
<p><b>Made in Woman</b> — это не Comedy Club и, тем более, не «женский Comedy Club». Это вообще не stand-up, а совсем другой жанр, скорее — эстрадный. Это ярко, громко и весело. Помните, были такие понятия: «эстрадный артист», «звезда эстрады», «театр эстрадных миниатюр»? Эстрада — это не человек у микрофона с монологом или набором шуток, точнее, не только он. Это ещё и танцы, песни, переодевания, фокусы, в конце концов! В «Made in Woman» есть шутки, над которыми нужно подумать, и есть чисто клоунская эксцентрика.</p>
</div>
</div>
</div>
<div></div>
</footer>
</body>
</html>
pastebin.com
Блочная верстка сайтов в CSS
Всем доброго дня!
На связи Бернацкий Андрей!
В данном выпуске речь пойдет о создании сайта с помощью блоков, т.е. блочная верстка сайтов.
Кстати говоря, данный выпуск имеет видео версию, можете скачать по ссылке:
Видео версия 13 урока
Для этого, нам необходимо познакомиться с CSS-свойством float, которое является одним из наиболее частоиспользуемых, при блочной верстке страниц сайта.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее Итак, свойство float предназначено для выравнивания элементов на странице. Это что-то похожее на параметр align в HTML тегах.
Свойство float:
Значения:
left – выравнивает элемент по левому краю.
right - выравнивает элемент по правому краю.
inherit – использует стиль выравнивания, как у родительского элемента.
none – без выравнивания.
Допустим нам нужно выровнять изображение по правому краю. Для него мы должны прописать:
<img src="myimg.jpg" />
Это будет один к одному, как если бы мы указали:
<img src="myimg.jpg" align="right" />
Изображение выровняется по правому краю, а текст, который идет после изображения, будет обтекать его справа. Если нам нужно запретить обтекание текста, используем свойство clear.
Свойство clear:
Значения:
left – отменяет обтекание слева.
right — отменяет обтекание справа.
inherit – отменяет обтекание, которое было у родительского элемента.
none – без обтекания.
both – отменяет любое выравнивание.
Но, чаще, свойство float используется для расположения элементов на странице.
Посмотрите на рисунок:
Это каркас сайта. Казалось бы, обычная таблица, но нет! Для реализации такое разметки не использовалась ни одна таблица! Все элементы – это теги <div>…</div>.
Посмотрим, как это можно легко реализовать.
Для начала создаем четыре блока div.
<div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
div – основной блок. Он содержит все остальные блоки, которые только у нас будут использоваться.
div – блок, в котором будет основное содержимое страницы (зеленый слева).
div – правый блок. В примере в нем находиться текст, но в реальной ситуации, там может быть навигация, рекламные баннеры, и т. д.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее div – желтый нижний блок. В нем, обычно, расположена контактная информация, различные ссылки и т.д.
Давайте теперь наполним наши блоки содержимым.
В общем, без задания стилей мы ничего особенного не увидим:
Теперь назначим стили для блоков:
.main{
background-color:#000099; width:600px; margin:0 auto;
}
.content{
background-color:#00CC00; width:400px;
}
.righter{
background-color:#660033; width:200px;
}
.foot{
background-color:#FFFF00;
}
color:#FFFF00;
}
Пока, думаю, все понятно. Все вышеизложенное описано в предыдущих выпусках рассылки.
Увидеть мы должны примерно следующее:
А теперь проанализируем код страницы.
Главному блоку у нас задана ширина в 600px, блоку с содержимым 400рх, а для левого блока 200рх. Но два последних блока не стали в один ряд, а расположились друг за другом.
Пришло время воспользоваться свойством float. В стилях дописываем следуюшее:
.content{
background-color:#00CC00; width:400px; float:left;
}
.righter{
background-color:#660033; width:200px; float: left;
}
Остальные стили пока не трогаем. Получили такую вещь:
Что-то получили, но не совсем то, что нужно. Но если разобраться в теории, то все свойства сработали корректно. Мы задали float:left для левого и правого блока, они выбились из потока следования элементов, и все, что было за ними, заняло свободное место вокруг этих блоков (аналогично как текст обтекает картинку, если ей задать это свойство).
Соответственно, чтобы нижний блок стал на свое, место пропишем следующее:
.foot{
background-color:#FFFF00; clear:both; float:left; width:100%;
}
clear:both – для отмены выравнивания от предыдущих блоков.
float:left – для собственного выравнивания блока.
width:100% — чтобы блок занял всю ширину основного блока.
Получили:
Почти то, что нужно, только блоки не равной высоты, и это видно, так как фон у них разный.
Одним из решений данной проблемы (самой простой и универсальной, на мой взгляд) является задание отступов снизу.
Делаем их следующим образом:
.main{
background-color:#000099; width:600px; margin:0 auto; overflow:hidden;
}
.content{
background-color:#00CC00; width:400px; float:left; padding-bottom:32000px; margin-bottom:-32000px;
}
.righter{
background-color:#660033; width:200px; float: left; padding-bottom:32000px; margin-bottom:-32000px;
}
После добавления этого кода получим:
Фон левого блока дотянулся до низа страницы. Теперь если мы будем менять содержимое блоков, то фон будет тянуться до низа, так как это и нужно. Собственно для этого и нужны отступы padding-bottom:32000px; margin-bottom:-32000px; для обоих блоков.
overflow:hidden; в классе main для того, чтобы скрыть большой отступ вниз без содержимого блоков.
В общем-то все, что нужно мы получили. Осталось только добавить отступов к блокам и выровнять текст в нижнем блоке по центру. Но это я оставлю вам на самостоятельную доработку.
На этом, выпуск посвящённый блочной верстке сайтов и страниц, завершим.
Просьба присылать с вопросом ваш код того, что вы делаете. Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ. И вам меньше объяснять в письме, что у вас не получается.
Данный урок имеет видео версию, которую Вы мо жете скачать по ссылке:
Видео версия 13 урока
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнее 
Практика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получить webformyself.com
Bootstrap footer прижать к низу: несколько простых способов
Доброго времени суток, дорогие читатели и подписчики блога. Сегодня я расскажу вам несколько способов, которые помогут в Bootstrap footer прижать к низу страницы. После прочтения данной статьи вы узнаете, в каких ситуациях этот прием применим, а также какие существуют инструменты и механизмы в Bootstrap 3 для решения поставленной задачи. Ну что ж, давайте приступим!
Где это применимо?
Основная масса сайтов содержит в себе примерно одинаковый набор частей, на которые разбивается первый: шапку (header), основной блок с контентом, место для меню, место для рекламы и «подвал» (footer). Все они могут размещаться на сервисе в различном порядке, а также дополняться другими объектами (слайдерами, лентами новостей, местами для комментариев и т.д.).
На сайтах футеры нужны для:
- Указания авторства, года создания, названия компании, сервиса и т.д., и других похожих атрибутов;
- Размещения навигационной панели;
- Указания контактной информации и прочее.
Чемоданчик с инструментами
Верстка веб-приложений интересна тем, что для одной поставленной задачи можно найти множество решений и впоследствии выбрать наиболее подходящее для конкретного проекта. Таким образом, чтобы прижать футер к низу экрана, можно воспользоваться множеством различных средств.
Если вы выбрали css – каскадные таблицы стилей – и язык разметки html, то здесь можно прибегнуть к таким решениям проблемы, как создание таблицы или же поиграться с позиционированием блоков. Если же вы предпочитаете работать с инструментами Bootstrap, то здесь на сцену выходят такие штуки, как fixed navigation bar и affix.Меню, зафиксированное снизу
Если вам необходимо разместить навигационную панель сайта в его «подвале», то воспользуйтесь возможностями navigation bar. С его помощью можно закрепить меню как сверху экрана, так и снизу, используя класс .navbar- fixed- top или .navbar- fixed- bottom. Нас интересует второе.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 <!DOCTYPE html>
<html lang="en">
<head>
<title>Bottom navbar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.little {
width: 50%;
margin-left: 25%;
text-align: center;
}
</style>
</head>
<body>
<nav>
<div>
<div>
<a href="#">МойБренд</a>
</div>
<ul>
<li><a href="#">О нас</a></li>
<li><a href="#">Продукция</a></li>
<li><a href="#">Доставкка и оплата</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
</nav>
<div>
<div>
<div>
<h3>Первый заголовок </h3>
<h4>Здесь расположен как-то текстовый контент.</h4>
<h3>Второй заголовок </h3>
<h4>И его очень-очень-очень много!</h4>
<!-- Добавьте побольше текста, чтобы на веб-странице появился скролл -->
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <title>Bottom navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .little { width: 50%; margin-left: 25%; text-align: center; } </style> </head> <body> <nav> <div> <div> <a href="#">МойБренд</a> </div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Продукция</a></li> <li><a href="#">Доставкка и оплата</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> <div> <div> <div> <h3>Первый заголовок </h3> <h4>Здесь расположен как-то текстовый контент.</h4> <h3>Второй заголовок </h3> <h4>И его очень-очень-очень много!</h4> <!-- Добавьте побольше текста, чтобы на веб-странице появился скролл --> </div> </div> </div> </body> </html>
Использование Affix Plugin
Это очень полезный и не менее интересный инструмент, который позволяет гибко манипулировать объектами на странице и фиксировать их положение в определенный момент.
Так, в примере футер будет расположен снизу страницы при прокрутке контента, пока пользователь не опустит скролл до конца. В этом случае футер закрепится в «подвале».
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.affix {
bottom: 0;
}
footer{
margin-left: -15px;
text-align: center;
height: 45px;
width: 100%;
color:#fff;
background-color:#2196F3;
}
</style>
</head>
<body>
<div>
<h2>Пример работы плагина</h2>
<h4>Пролистайте информацию на странице</h4>
</div>
<br>
<div>
<div>
<div>
<h2>Много бесполезного текста...</h2>
<h2>специально для появления скролла.</h2>
<h2>Много бесполезного текста...</h2>
<h2>специально для появления скролла.</h2>
</div>
</div>
</div>
<div>
<footer data-spy="affix" data-offset-bottom="0">
<p>Все права защищены</p>
</footer>
</div>
</body>
</html>
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .affix { bottom: 0; } footer{ margin-left: -15px; text-align: center; height: 45px; width: 100%; color:#fff; background-color:#2196F3; } </style> </head> <body> <div> <h2>Пример работы плагина</h2> <h4>Пролистайте информацию на странице</h4> </div> <br> <div> <div> <div> <h2>Много бесполезного текста...</h2> <h2>специально для появления скролла.</h2> <h2>Много бесполезного текста...</h2> <h2>специально для появления скролла.</h2> </div> </div> </div> <div> <footer data-spy="affix" data-offset-bottom="0"> <p>Все права защищены</p> </footer> </div> </body> </html>
На этом статья подошла к концу. Вступайте в ряды моих подписчиков, читайте другие публикации блога и делитесь понравившимися со знакомыми и друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 121 раз
romanchueshov.ru
CSS Sticky Footer / Прилипающий футер / Хабрахабр
Введение
В Гугле можно найти много реализаций прилипающего футера. Я перепробовал большинство из них, и обычно где-нибудь они да подводили. В основном из-за того, что предложенные методы были слишком старыми, и не срабатывали в новых браузерах. Но, поскольку страницы, предлагающие решения, довольно старые, на них давно ссылается много других сайтов, из-за чего они до сих пор находятся довольно высоко в поисковой выдаче Гугла. Вебмастеры находят их самыми первыми в своих поисках, и потом долго чешут репу, не видя ничего нового.Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет.
Прилипающий футер, представленный здесь, основан на информации, полученной из статьи Изучаем футеры на List Apart, а так же дополненной материалом Кэмерона Адамса и вот этим кусочком с lwis.net. Он использует clearfix-хак, чтобы держать футер на своем месте в Google Chrome и других браузерах, где он может «всплыть» наверх при изменение размеров окна. Так же этот хак позволяет избежать проблем, если вы используете float для создании двух- или трехколоночных макетов. Мы протестировали его более чем в 50 браузерах, и работает он отлично.
HTML-код
Ниже представлена простейшая структура HTML-кода. Вы уже наверно заметили, что с футером находится снаружи оберточного 'а.<div> <div>
</div>
</div>
<div>
</div>
Содержимое вашей страницы можно расположить внутри <div>'а main. Например, для двухколоночного макета код будет таким:
<div> <div>
<div>
</div>
<div>
</div>
</div>
</div>
<div>
</div>
Шапку можно расположить внутри wrap, но снаружи main
<div> <div>
</div>
<div>
</div>
</div>
<div>
</div>
Если вам захочется поместить какие-нибудь элементы вне этих блоков, то придется заморачиваться с абсолютным позиционированием и вычислением 100%-ной высоты.CSS-код
Ниже — CSS-код, прижимающий футер к низу: html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* отступ должен быть равен высоте футера */ #footer {position: relative; margin-top: -150px; /* отрицательное значение высоты футера */ height: 150px; clear:both;}
Значение высоты футера использовано здесь трижды. Важно, чтобы везде оно было одинаковым. Свойства height растягивают оберточный по высоте на весь размер окна. Отрицательный отступ футера размещает его внутри отступов main-'а. Посколько main находится внутри wrap, высота отступов уже включена в вышеописанную 100%-ную высоту. Таким образом футер остается в низу страницы.
Но это еще не все — надо назначить clearfix-свойства main-'у.Clearfix-хак спешит на помощь
Много CSS-дизайнеров уже знакомы с Clearfix-хаком. Он решает довольно много проблем с плавающими элементами. Здесь мы используем его, чтобы прибить футер в Google Chrome. Так же он избавит нас от проблем с «всплытием» футера в ситауции, например, когда в макете из двух колонок контент флоатится в одну сторону, а сайдбар в другую. Поэтому добавляем в стили это: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */ Даже если вы используете метод Райана Фэйта с лишним <div>'ом, придется применять этот хак для многоколоночных макетов.
Известные проблемы
Высота и поля
Если использовать вертикальные отступы внутри некоторых элементов, это может толкнуть футер вниз на расстояние этих отступов, в шапке, например, или даже в wrap или main. Вместо полей снаружи (margins) лучше использовать отступы внутри (padding). Вы можете заметить, что содержимого на странице не так уж и много, а футер уползает за границы окна и появляется вертикальная полоса прокрутки: проверьте, нет ли где margin'ов, и замените их на padding.
Будьте внимательны при объявлении отступов для main'а в разных местах. Если хочется добавить что-то вроде padding:0 10px 0 10px;, будьте осторожны — это может переопределить отступы внизу, которые должны быть строго определенной величины, контент может пойти поверх футера на длинных страницах (в Google Chrome).Размеры шрифтов
Устанавливая размер шрифтов в относительных величинах, помните, что пользователи могут увеличивать их. В некоторых элементах, хотя бы даже в футере, это может испортить настройки высоты и получится разрыв, если тексту не хватает места. Используйте абсолютные величины (pt или px), или просто сделайте футер побольше.Платформа .NET
При разработке сайтов на ASP.net, где каждая страница находится внутри , не забудьте добавить height:100% для form, например так: html, body, form, #wrap {height: 100%;} UPD от переводчика. Считаю нужным прояснить для вас, господа, несколько моментов:
1. Это топик-перевод. Все вопросы и возмущения по поводу методов можете направить автору, его зовут Стив Хэтчер, ссылка прилагалась с самого начала
2. По-поводу IE-Mac, неработы в Хроме и прочего: ребята, неизвестно когда писался этот метод, но он обновлялся и пересматривался, а кроме этого он работает в подавляющем большинстве браузеров. «Не работает в Хроме» может значить, что футер уплывал куда-то в ранних билдах этого браузера. Ну и что, что у вас стоит последний апдейт? Есть люди, которые браузер не обновляют просто потому, что не знают о такой возможности, или просто не видят необходимости в этом. Вам хуже станет от того, что этот способ работает везде? Ну правда?
3. pt vs. em vs. px vs. %. Используйте у себя на сайте что хотите. Автор предложил ДВА метода решения проблемы с разъезжающимися пропорциями, вам никто не запрещает и не навязывает использовать любой из них. Мы все здесь не маленькие и знаем, что такое хорошо, а что такое плохо.
habrahabr.ru
DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта | KtoNaNovenkogo.ru
DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта
Обновлено: 16 июля 2017
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем тему блочной верстки, которая была начата и продолжена в трех предыдущих статьях. В принципе, нам уже удалось создать как двух- , так и трехколоночный макет сайта, и мы даже успели рассмотреть нюансы создания резинового макета.
- Основы блочной верстки
- Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
- Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
Какие проблемы возникли с нашим макетом сайта
Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом. Чаще всего такая ситуация возникает при просмотре его на больших мониторах (с высоким разрешением) и при отображении страницы с малым количеством информации.
В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на его середине по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.
Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:
Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:
Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div>Шапка </div> <div>Левая колонка Меню Меню Меню Меню</div> <div>Правая колонка Меню Меню Меню Меню</div> <div>Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div>Подвал</div> </div> </body> </html> А в файле Style.css были прописаны следующие CSS свойства:
body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; } Ну, а сам макет выглядел примерно так:
Как прижать футер к низу макета сайта
Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.
Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:
body, html { margin:0px; padding:0px; height: 100%; } На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.
Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:
#maket { width:300px; margin:0 auto; min-height: 100%; } Еще я хочу его подсветить (div с). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):
#maket { width:300px; margin:0 auto; min-height: 100%; border: solid 3px black; } Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:
Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div>Шапка </div> <div>Левая колонка Меню Меню Меню Меню</div> <div>Правая колонка Меню Меню Меню Меню</div> <div>Содержимое страницы Содержимое страницы Содержимое </div> </div> <div>Подвал</div> </body> </html> Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:
Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).
Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).
Но для того, чтобы задать отрицательный отступ от верха, нужно знать эту самую высоту footer, а мы ее пока что не знаем.
Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; } А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; } Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):
Вставляем распорку и боремся с Internet Explorer
Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для него и который помог поднять наш подвал с наездом на основной контейнер макета.
Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.
Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div>Шапка </div> <div>Левая колонка Меню Меню Меню Меню</div> <div>Правая колонка Меню Меню Меню Меню</div> <div>Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div> <div></div> </div> <div>Подвал</div> </body> </html> А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:
#rasporka { height: 50px; } В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.
Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.
Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.
Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:
#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; } С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:
Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.
Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:
* html #maket { height: 100%; } Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.
Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:
body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; } Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.
Можете также посмотреть видео «Работа с Html тегом div»:
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Твитнуть
Поделиться
Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить
Подборки по теме:
Рубрика: Блочная DIV верстка ktonanovenkogo.ru
Как прижать подвал (footer) к низу экрана
Всем привет!
Сайт выглядит эстетично, если все его элементы находятся на своих местах. Однако часто бывают случаи, когда все вроде бы нормально, но что-то все-таки не так... Например, если страница короткая, футер не прижат к низу страницы, а находится там, где ему и положено — после основного блока сайта. Это смотрится не очень красиво.
Поэтому сегодня мы поговорим с вами о том, как прижать подвал сайта к нижней границе окна браузера.
Итак, к подвалу мы выставим следующие требования:
- подвал прижат к низу экрана при высоте окна браузера больше высоты страницы не зависимо от контента;
- футер находится на положенном ему месте при объеме контента больше, чем высота окна браузера;
- работает в во всех популярных браузерах;
- надежность — не зависит от сложности верстки.
Для примера возьмем простую страницу, состоящую из двух основных блоков: основного (main) и подвала (footer). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:
Шаг 1
Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (min-height), подвалу жестко указываем высоту (height).
При этом общая высота сайта составит высота экрана + высота подвала.
Шаг 2
Отрицательным отступом (margin-top) «въезжаем» в основной блок, чтобы высота сайта составляла только 100% высоты экрана.
При таком расположении блоков и при достаточном количестве контента (например, текста) в основном блоке, возможны накладки контента в основном блоке на подвал:
Шаг 3
Для избежания этой потенциальной проблемы, добавляем в конец основного блока пустой блок, высотой не меньше высоты подвала (а лучше немного больше, чтобы был отступ между контентом и подвалом):
Теперь, если контента будет много, он будет двигать пустой блок вниз. А это будет опускать и подвал, не давая налезть на него контенту.
Смотрим как это выглядит в коде:
<html> <head> <title>Футер прижат к низу</title> <style type="text/css"> * {margin: 0; padding: 0;} /* обнуляем отступы */ body { background: #fff;} html,body { height: 100%; /* задаем высоту тела документа */} .main { /* основной блок, который должен растянуться до подвала */ background: #999; /* цвет фона основного блока (для наглядности) */ min-height: 100%; /* задаем минимальную высоту основного блока */} * html .main { /* хак для ie6 */ height: 100%; /* для ие6, т.к. не понимает min-height */} .hFooter { /* это распорка в основном блоке - резервируем место для подвала */ height: 40px; /* высота нашего подвала */} .footer { /* подвал */ background: #0000CC; /* цвет фона подвала (для наглядности) */ color: #fff; height: 40px; /* высота подвала */ margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */} </style> </head> <body> <div> Это основной блок <div></div> </div> <div>Это подвал</div> </body> </html>
Результат этого примера.
Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для .hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:
.hFooter { clear: both; height: 40px;}
Если Вы уже немного освоили CSS, тогда может возникнуть вопрос: «Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?».
Ответ — так просто его тут использовать нельзя, так как размер блока равен его размерам + ширина внутренних отступов + ширина границ. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами экрана.
Недостаток данного приема — это использование дополнительного пустого элемента hFooter. В реальных условиях (когда содержимое сайта не пустое и применяется блочная верстка) этого можно избежать применив метод clearfix — этот прием поможет очистить поток без использования дополнительного элемента, а чтобы контент не налез на футер, пропишем в колонках padding-bottom.
Проблемы с z-слоями
В вышеописанном приеме футер поднимали отрицательным отступом вверх. При этом возникает потенциальная проблема с z-слоями. Например, нам нужно показать всплывающее окно (пускай это будет div), которое будет позиционироваться относительно контейнера main.
HTML:
<div> [...] <div> [...] </div> </div> <div> [...] </div>
CSS:
.main { position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */ z-index: 1; /* z-index меньше чем у футера, чтобы тот был виден */} .popup { position: absolute; z-index: 100; [...]} .footer { height: 50px; margin-top: -50px; position: relative; /* чтобы можно было задать z-index */ z-index: 2; /* больше, чем у main чтобы быть видимым */}
Все хорошо до тех пор пока у нас не пересекаются всплывающее окно и подвал (а такая ситуация довольно часто возникает) — вот тут начинаются проблемы. Не смотря на то, что у всплывающего окна наибольший z-index, оно будет перекрываться футером, т.к. родитель popup имеет z-index меньший, чем у подвала:
В этом случае нужно искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен внутри main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.
Решение 2 — абсолютное позиционирование
Идея похожа на решение 1:
- Растягиваем основной блок на всю высоту экрана;
- Резервируем место для подвала;
- Относительно основного блока позиционируем подвал в самый низ абсолютным позиционированием.
HTML:
<div> [...] <div> [...] </div> </div>
CSS:
html, body { height: 100%;} .main { min-height: 100%; position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */} .footer { height: 50px; position: absolute; left: 0; bottom: 0; width: 100%;} * html .footer { bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* хак для ие6, у которого есть косяк со смещением на 1px */}
Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.
Недостаток обоих методов — оба метода годятся только для фиксированного по высоте подвала.
На сегодня все. Теперь Вы знаете, как прижать футер к низу экрана разными способами и какие при этом могут возникнуть проблемы.
Подписываемся на обновления и ждем новых интересных публикаций. Пока.
free-site-master.ru
[HTML 5]
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!<div></div>
<footer>
<div>
<div>
<div>
<div>
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<a href='http://www.liveinternet.ru/click' "+
"target=_blank><img src='//counter.yadro.ru/hit?t20.7;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='LiveInternet: показано число просмотров за 24"+
" часа, посетителей за 24 часа и за сегодня' "+
"border='0'><\/a>")
//--></script><!--/LiveInternet-->
</div>
<div></div>
</div>
<ul>
<li><a href="http://камедивумен.рф">Главная</a></li>
<li><a href="http://камедивумен.рф/girl">Участницы</a></li>
<li><a href="http://камедивумен.рф/vipuski">Выпуски</a></li>
<li><a href="http://камедивумен.рф/contact">Контакты</a></li>
</ul>
</div>
<div>
<div>© 2012 <a href="/">Камедивумен.рф</a> <br /> Лучшее женское комедийное шоу</div>
<div>
<p><b>Made in Woman</b> — это не Comedy Club и, тем более, не «женский Comedy Club». Это вообще не stand-up, а совсем другой жанр, скорее — эстрадный. Это ярко, громко и весело. Помните, были такие понятия: «эстрадный артист», «звезда эстрады», «театр эстрадных миниатюр»? Эстрада — это не человек у микрофона с монологом или набором шуток, точнее, не только он. Это ещё и танцы, песни, переодевания, фокусы, в конце концов! В «Made in Woman» есть шутки, над которыми нужно подумать, и есть чисто клоунская эксцентрика.</p>
</div>
</div>
</div>
<div></div>
</footer>
</body>
</html>
<div></div> <footer> <div> <div> <div> <div> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<a href='http://www.liveinternet.ru/click' "+ "target=_blank><img src='//counter.yadro.ru/hit?t20.7;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='LiveInternet: показано число просмотров за 24"+ " часа, посетителей за 24 часа и за сегодня' "+ "border='0'><\/a>") //--></script><!--/LiveInternet--> </div> <div></div> </div> <ul> <li><a href="http://камедивумен.рф">Главная</a></li> <li><a href="http://камедивумен.рф/girl">Участницы</a></li> <li><a href="http://камедивумен.рф/vipuski">Выпуски</a></li> <li><a href="http://камедивумен.рф/contact">Контакты</a></li> </ul> </div> <div> <div>© 2012 <a href="/">Камедивумен.рф</a> <br /> Лучшее женское комедийное шоу</div> <div> <p><b>Made in Woman</b> — это не Comedy Club и, тем более, не «женский Comedy Club». Это вообще не stand-up, а совсем другой жанр, скорее — эстрадный. Это ярко, громко и весело. Помните, были такие понятия: «эстрадный артист», «звезда эстрады», «театр эстрадных миниатюр»? Эстрада — это не человек у микрофона с монологом или набором шуток, точнее, не только он. Это ещё и танцы, песни, переодевания, фокусы, в конце концов! В «Made in Woman» есть шутки, над которыми нужно подумать, и есть чисто клоунская эксцентрика.</p> </div> </div> </div> <div></div> </footer> </body> </html>
pastebin.com
Блочная верстка сайтов в CSS
Всем доброго дня!
На связи Бернацкий Андрей!
В данном выпуске речь пойдет о создании сайта с помощью блоков, т.е. блочная верстка сайтов.
Кстати говоря, данный выпуск имеет видео версию, можете скачать по ссылке:
Видео версия 13 урока
Для этого, нам необходимо познакомиться с CSS-свойством float, которое является одним из наиболее частоиспользуемых, при блочной верстке страниц сайта.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееИтак, свойство float предназначено для выравнивания элементов на странице. Это что-то похожее на параметр align в HTML тегах.
Свойство float:
Значения:
left – выравнивает элемент по левому краю.
right - выравнивает элемент по правому краю.
inherit – использует стиль выравнивания, как у родительского элемента.
none – без выравнивания.
Допустим нам нужно выровнять изображение по правому краю. Для него мы должны прописать:
<img src="myimg.jpg" />Это будет один к одному, как если бы мы указали:
<img src="myimg.jpg" align="right" />Изображение выровняется по правому краю, а текст, который идет после изображения, будет обтекать его справа. Если нам нужно запретить обтекание текста, используем свойство clear.
Свойство clear:
Значения:
left – отменяет обтекание слева.
right — отменяет обтекание справа.
inherit – отменяет обтекание, которое было у родительского элемента.
none – без обтекания.
both – отменяет любое выравнивание.
Но, чаще, свойство float используется для расположения элементов на странице.
Посмотрите на рисунок:
Это каркас сайта. Казалось бы, обычная таблица, но нет! Для реализации такое разметки не использовалась ни одна таблица! Все элементы – это теги <div>…</div>.
Посмотрим, как это можно легко реализовать.
Для начала создаем четыре блока div.
<div> <div> </div> <div> </div> <div> </div> </div>div – основной блок. Он содержит все остальные блоки, которые только у нас будут использоваться.
div – блок, в котором будет основное содержимое страницы (зеленый слева).
div – правый блок. В примере в нем находиться текст, но в реальной ситуации, там может быть навигация, рекламные баннеры, и т. д.
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееdiv – желтый нижний блок. В нем, обычно, расположена контактная информация, различные ссылки и т.д.
Давайте теперь наполним наши блоки содержимым.
В общем, без задания стилей мы ничего особенного не увидим:
Теперь назначим стили для блоков:
.main{ background-color:#000099; width:600px; margin:0 auto; } .content{ background-color:#00CC00; width:400px; } .righter{ background-color:#660033; width:200px; } .foot{ background-color:#FFFF00; } color:#FFFF00; }Пока, думаю, все понятно. Все вышеизложенное описано в предыдущих выпусках рассылки.
Увидеть мы должны примерно следующее:
А теперь проанализируем код страницы.
Главному блоку у нас задана ширина в 600px, блоку с содержимым 400рх, а для левого блока 200рх. Но два последних блока не стали в один ряд, а расположились друг за другом.
Пришло время воспользоваться свойством float. В стилях дописываем следуюшее:
.content{ background-color:#00CC00; width:400px; float:left; } .righter{ background-color:#660033; width:200px; float: left; }Остальные стили пока не трогаем. Получили такую вещь:
Что-то получили, но не совсем то, что нужно. Но если разобраться в теории, то все свойства сработали корректно. Мы задали float:left для левого и правого блока, они выбились из потока следования элементов, и все, что было за ними, заняло свободное место вокруг этих блоков (аналогично как текст обтекает картинку, если ей задать это свойство).
Соответственно, чтобы нижний блок стал на свое, место пропишем следующее:
.foot{ background-color:#FFFF00; clear:both; float:left; width:100%; }clear:both – для отмены выравнивания от предыдущих блоков.
float:left – для собственного выравнивания блока.
width:100% — чтобы блок занял всю ширину основного блока.
Получили:
Почти то, что нужно, только блоки не равной высоты, и это видно, так как фон у них разный.
Одним из решений данной проблемы (самой простой и универсальной, на мой взгляд) является задание отступов снизу.
Делаем их следующим образом:
.main{ background-color:#000099; width:600px; margin:0 auto; overflow:hidden; } .content{ background-color:#00CC00; width:400px; float:left; padding-bottom:32000px; margin-bottom:-32000px; } .righter{ background-color:#660033; width:200px; float: left; padding-bottom:32000px; margin-bottom:-32000px; }После добавления этого кода получим:
Фон левого блока дотянулся до низа страницы. Теперь если мы будем менять содержимое блоков, то фон будет тянуться до низа, так как это и нужно. Собственно для этого и нужны отступы padding-bottom:32000px; margin-bottom:-32000px; для обоих блоков.
overflow:hidden; в классе main для того, чтобы скрыть большой отступ вниз без содержимого блоков.
В общем-то все, что нужно мы получили. Осталось только добавить отступов к блокам и выровнять текст в нижнем блоке по центру. Но это я оставлю вам на самостоятельную доработку.
На этом, выпуск посвящённый блочной верстке сайтов и страниц, завершим.
Просьба присылать с вопросом ваш код того, что вы делаете. Так будет проще и мне понять, что у вас не получилось и дать вам четкий ответ. И вам меньше объяснять в письме, что у вас не получается.
Данный урок имеет видео версию, которую Вы мо жете скачать по ссылке:
Видео версия 13 урока
Практический курс по верстке адаптивного лендинга с нуля!
Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней
Узнать подробнееПрактика HTML5 и CSS3 с нуля до результата!
Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3
Получитьwebformyself.com
Bootstrap footer прижать к низу: несколько простых способов
Доброго времени суток, дорогие читатели и подписчики блога. Сегодня я расскажу вам несколько способов, которые помогут в Bootstrap footer прижать к низу страницы. После прочтения данной статьи вы узнаете, в каких ситуациях этот прием применим, а также какие существуют инструменты и механизмы в Bootstrap 3 для решения поставленной задачи. Ну что ж, давайте приступим!
Где это применимо?
Основная масса сайтов содержит в себе примерно одинаковый набор частей, на которые разбивается первый: шапку (header), основной блок с контентом, место для меню, место для рекламы и «подвал» (footer). Все они могут размещаться на сервисе в различном порядке, а также дополняться другими объектами (слайдерами, лентами новостей, местами для комментариев и т.д.).
На сайтах футеры нужны для:
- Указания авторства, года создания, названия компании, сервиса и т.д., и других похожих атрибутов;
- Размещения навигационной панели;
- Указания контактной информации и прочее.
Чемоданчик с инструментами
Верстка веб-приложений интересна тем, что для одной поставленной задачи можно найти множество решений и впоследствии выбрать наиболее подходящее для конкретного проекта. Таким образом, чтобы прижать футер к низу экрана, можно воспользоваться множеством различных средств.
Если вы выбрали css – каскадные таблицы стилей – и язык разметки html, то здесь можно прибегнуть к таким решениям проблемы, как создание таблицы или же поиграться с позиционированием блоков. Если же вы предпочитаете работать с инструментами Bootstrap, то здесь на сцену выходят такие штуки, как fixed navigation bar и affix.Меню, зафиксированное снизу
Если вам необходимо разместить навигационную панель сайта в его «подвале», то воспользуйтесь возможностями navigation bar. С его помощью можно закрепить меню как сверху экрана, так и снизу, используя класс .navbar- fixed- top или .navbar- fixed- bottom. Нас интересует второе.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="en"> <head> <title>Bottom navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .little { width: 50%; margin-left: 25%; text-align: center; } </style> </head> <body> <nav> <div> <div> <a href="#">МойБренд</a> </div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Продукция</a></li> <li><a href="#">Доставкка и оплата</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> <div> <div> <div> <h3>Первый заголовок </h3> <h4>Здесь расположен как-то текстовый контент.</h4> <h3>Второй заголовок </h3> <h4>И его очень-очень-очень много!</h4> <!-- Добавьте побольше текста, чтобы на веб-странице появился скролл --> </div> </div> </div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <title>Bottom navbar</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .little { width: 50%; margin-left: 25%; text-align: center; } </style> </head> <body> <nav> <div> <div> <a href="#">МойБренд</a> </div> <ul> <li><a href="#">О нас</a></li> <li><a href="#">Продукция</a></li> <li><a href="#">Доставкка и оплата</a></li> <li><a href="#">Контакты</a></li> </ul> </div> </nav> <div> <div> <div> <h3>Первый заголовок </h3> <h4>Здесь расположен как-то текстовый контент.</h4> <h3>Второй заголовок </h3> <h4>И его очень-очень-очень много!</h4> <!-- Добавьте побольше текста, чтобы на веб-странице появился скролл --> </div> </div> </div> </body> </html>
Использование Affix Plugin
Это очень полезный и не менее интересный инструмент, который позволяет гибко манипулировать объектами на странице и фиксировать их положение в определенный момент.
Так, в примере футер будет расположен снизу страницы при прокрутке контента, пока пользователь не опустит скролл до конца. В этом случае футер закрепится в «подвале».
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .affix { bottom: 0; } footer{ margin-left: -15px; text-align: center; height: 45px; width: 100%; color:#fff; background-color:#2196F3; } </style> </head> <body> <div> <h2>Пример работы плагина</h2> <h4>Пролистайте информацию на странице</h4> </div> <br> <div> <div> <div> <h2>Много бесполезного текста...</h2> <h2>специально для появления скролла.</h2> <h2>Много бесполезного текста...</h2> <h2>специально для появления скролла.</h2> </div> </div> </div> <div> <footer data-spy="affix" data-offset-bottom="0"> <p>Все права защищены</p> </footer> </div> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style> .affix { bottom: 0; } footer{ margin-left: -15px; text-align: center; height: 45px; width: 100%; color:#fff; background-color:#2196F3; } </style> </head> <body> <div> <h2>Пример работы плагина</h2> <h4>Пролистайте информацию на странице</h4> </div> <br> <div> <div> <div> <h2>Много бесполезного текста...</h2> <h2>специально для появления скролла.</h2> <h2>Много бесполезного текста...</h2> <h2>специально для появления скролла.</h2> </div> </div> </div> <div> <footer data-spy="affix" data-offset-bottom="0"> <p>Все права защищены</p> </footer> </div> </body> </html>
На этом статья подошла к концу. Вступайте в ряды моих подписчиков, читайте другие публикации блога и делитесь понравившимися со знакомыми и друзьями. Пока-пока!
С уважением, Роман Чуешов
Прочитано: 121 раз
romanchueshov.ru
CSS Sticky Footer / Прилипающий футер / Хабрахабр
Введение
В Гугле можно найти много реализаций прилипающего футера. Я перепробовал большинство из них, и обычно где-нибудь они да подводили. В основном из-за того, что предложенные методы были слишком старыми, и не срабатывали в новых браузерах. Но, поскольку страницы, предлагающие решения, довольно старые, на них давно ссылается много других сайтов, из-за чего они до сих пор находятся довольно высоко в поисковой выдаче Гугла. Вебмастеры находят их самыми первыми в своих поисках, и потом долго чешут репу, не видя ничего нового.Решения Райана Фэйта хорошо известно и работает, но требует лишний пустой <div>. Приверженцы чистого HTML-кода могут найти это богохульство несемантичным. В нашем решении лишнего <div> нет. Прилипающий футер, представленный здесь, основан на информации, полученной из статьи Изучаем футеры на List Apart, а так же дополненной материалом Кэмерона Адамса и вот этим кусочком с lwis.net. Он использует clearfix-хак, чтобы держать футер на своем месте в Google Chrome и других браузерах, где он может «всплыть» наверх при изменение размеров окна. Так же этот хак позволяет избежать проблем, если вы используете float для создании двух- или трехколоночных макетов. Мы протестировали его более чем в 50 браузерах, и работает он отлично.
HTML-код
Ниже представлена простейшая структура HTML-кода. Вы уже наверно заметили, что с футером находится снаружи оберточного 'а.<div><div>
</div>
</div>
<div>
</div>
Содержимое вашей страницы можно расположить внутри <div>'а main. Например, для двухколоночного макета код будет таким:
<div><div>
<div>
</div>
<div>
</div>
</div>
</div>
<div>
</div>
Шапку можно расположить внутри wrap, но снаружи main
<div><div>
</div>
<div>
</div>
</div>
<div>
</div>
Если вам захочется поместить какие-нибудь элементы вне этих блоков, то придется заморачиваться с абсолютным позиционированием и вычислением 100%-ной высоты.CSS-код
Ниже — CSS-код, прижимающий футер к низу: html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;} /* отступ должен быть равен высоте футера */ #footer {position: relative; margin-top: -150px; /* отрицательное значение высоты футера */ height: 150px; clear:both;} Значение высоты футера использовано здесь трижды. Важно, чтобы везде оно было одинаковым. Свойства height растягивают оберточный по высоте на весь размер окна. Отрицательный отступ футера размещает его внутри отступов main-'а. Посколько main находится внутри wrap, высота отступов уже включена в вышеописанную 100%-ную высоту. Таким образом футер остается в низу страницы. Но это еще не все — надо назначить clearfix-свойства main-'у.Clearfix-хак спешит на помощь
Много CSS-дизайнеров уже знакомы с Clearfix-хаком. Он решает довольно много проблем с плавающими элементами. Здесь мы используем его, чтобы прибить футер в Google Chrome. Так же он избавит нас от проблем с «всплытием» футера в ситауции, например, когда в макете из двух колонок контент флоатится в одну сторону, а сайдбар в другую. Поэтому добавляем в стили это: .clearfix:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac \*/ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */Даже если вы используете метод Райана Фэйта с лишним <div>'ом, придется применять этот хак для многоколоночных макетов.
Известные проблемы
Высота и поля
Если использовать вертикальные отступы внутри некоторых элементов, это может толкнуть футер вниз на расстояние этих отступов, в шапке, например, или даже в wrap или main. Вместо полей снаружи (margins) лучше использовать отступы внутри (padding). Вы можете заметить, что содержимого на странице не так уж и много, а футер уползает за границы окна и появляется вертикальная полоса прокрутки: проверьте, нет ли где margin'ов, и замените их на padding. Будьте внимательны при объявлении отступов для main'а в разных местах. Если хочется добавить что-то вроде padding:0 10px 0 10px;, будьте осторожны — это может переопределить отступы внизу, которые должны быть строго определенной величины, контент может пойти поверх футера на длинных страницах (в Google Chrome).Размеры шрифтов
Устанавливая размер шрифтов в относительных величинах, помните, что пользователи могут увеличивать их. В некоторых элементах, хотя бы даже в футере, это может испортить настройки высоты и получится разрыв, если тексту не хватает места. Используйте абсолютные величины (pt или px), или просто сделайте футер побольше.Платформа .NET
При разработке сайтов на ASP.net, где каждая страница находится внутри , не забудьте добавить height:100% для form, например так: html, body, form, #wrap {height: 100%;}UPD от переводчика. Считаю нужным прояснить для вас, господа, несколько моментов: 1. Это топик-перевод. Все вопросы и возмущения по поводу методов можете направить автору, его зовут Стив Хэтчер, ссылка прилагалась с самого начала 2. По-поводу IE-Mac, неработы в Хроме и прочего: ребята, неизвестно когда писался этот метод, но он обновлялся и пересматривался, а кроме этого он работает в подавляющем большинстве браузеров. «Не работает в Хроме» может значить, что футер уплывал куда-то в ранних билдах этого браузера. Ну и что, что у вас стоит последний апдейт? Есть люди, которые браузер не обновляют просто потому, что не знают о такой возможности, или просто не видят необходимости в этом. Вам хуже станет от того, что этот способ работает везде? Ну правда? 3. pt vs. em vs. px vs. %. Используйте у себя на сайте что хотите. Автор предложил ДВА метода решения проблемы с разъезжающимися пропорциями, вам никто не запрещает и не навязывает использовать любой из них. Мы все здесь не маленькие и знаем, что такое хорошо, а что такое плохо.
habrahabr.ru
DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта | KtoNaNovenkogo.ru
DIV верстка — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта
Обновлено: 16 июля 2017
Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Продолжаем тему блочной верстки, которая была начата и продолжена в трех предыдущих статьях. В принципе, нам уже удалось создать как двух- , так и трехколоночный макет сайта, и мы даже успели рассмотреть нюансы создания резинового макета.
- Основы блочной верстки
- Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
- Создаем двухколоночный, трехколоночный и резиновый макеты для сайта
Какие проблемы возникли с нашим макетом сайта
Сегодня мы попробуем решить одну небольшую проблему, которая может возникнуть с созданным нами ранее макетом. Чаще всего такая ситуация возникает при просмотре его на больших мониторах (с высоким разрешением) и при отображении страницы с малым количеством информации.
В этом случае может получиться так, что футер не будет прижат к низу экрана, а будет располагаться чуть ли не на его середине по высоте, что в большинстве случаев будет выглядеть некрасиво и не эстетично.
Все же, по моему мнению, прижать footer к самому низу макета сайта нужно, и особенно это будет актуально в случае, когда высота страницы получиться меньше, чем высота экрана пользователя. Схематично это можно представить так:
Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:
Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.
Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div>Шапка </div> <div>Левая колонка Меню Меню Меню Меню</div> <div>Правая колонка Меню Меню Меню Меню</div> <div>Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div> <div>Подвал</div> </div> </body> </html>А в файле Style.css были прописаны следующие CSS свойства:
body, html { margin:0px; padding:0px; } #maket { width:800px; margin:0 auto; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; }Ну, а сам макет выглядел примерно так:
Как прижать футер к низу макета сайта
Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.
Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:
body, html { margin:0px; padding:0px; height: 100%; }На внешнем виде это никак пока не отразится, но зато теперь основной блог можно будет растянуться на всю высоту экрана. Т.е. это был своеобразный подготовительный этап.
Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:
#maket { width:300px; margin:0 auto; min-height: 100%; }Еще я хочу его подсветить (div с). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):
#maket { width:300px; margin:0 auto; min-height: 100%; border: solid 3px black; }Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:
Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div>Шапка </div> <div>Левая колонка Меню Меню Меню Меню</div> <div>Правая колонка Меню Меню Меню Меню</div> <div>Содержимое страницы Содержимое страницы Содержимое </div> </div> <div>Подвал</div> </body> </html>Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:
Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).
Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.
Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).
Но для того, чтобы задать отрицательный отступ от верха, нужно знать эту самую высоту footer, а мы ее пока что не знаем.
Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; }А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:
#footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; }Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):
Вставляем распорку и боремся с Internet Explorer
Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:
Получается, что может возникнуть ситуация, когда информация в одной из колонок макета наедет на футер, что будет выглядеть не красиво. Происходит это из-за пресловутого отрицательного отступа, который мы задали для него и который помог поднять наш подвал с наездом на основной контейнер макета.
Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.
Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.
Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:
<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Заголовок</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div> <div>Шапка </div> <div>Левая колонка Меню Меню Меню Меню</div> <div>Правая колонка Меню Меню Меню Меню</div> <div>Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div> <div></div> </div> <div>Подвал</div> </body> </html>А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:
#rasporka { height: 50px; }В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.
Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):
Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.
Ширину имеет смысл задать равной ширине всего макета с помощью свойства Width, а выравнивание по горизонтали можно осуществить таким же способом, как мы это сделали для всего макета на блочной верстке.
Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:
#footer{ background-color:#FFC0FF; clear:both; height: 20px; margin-top:-20px; width:800px; margin-left: auto; margin-right: auto; }С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:
Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.
Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.
Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:
* html #maket { height: 100%; }Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.
Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:
body, html { margin:0px; padding:0px; height: 100%; } * html #maket { height: 100%; } #maket { width:800px; margin:0 auto; min-height: 100%; } #header{ background-color:#C0C000; } #left{ background-color:#00C0C0; width:200px; float:left; } #right{ width:200px; background-color:#FFFF00; float:right; } #content{ background-color:#8080FF; margin-left:202px; margin-right:202px; } #footer{ background-color:#FFC0FF; clear:both; height: 50px; margin-top:-50px; width:800px; margin-left: auto; margin-right: auto; } #rasporka { height: 50px; }Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.
Можете также посмотреть видео «Работа с Html тегом div»:
Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru
Твитнуть
Поделиться
Плюсануть
Поделиться
Отправить
Класснуть
Линкануть
Запинить
Подборки по теме:
Рубрика: Блочная DIV версткаktonanovenkogo.ru
Как прижать подвал (footer) к низу экрана
Всем привет!
Сайт выглядит эстетично, если все его элементы находятся на своих местах. Однако часто бывают случаи, когда все вроде бы нормально, но что-то все-таки не так... Например, если страница короткая, футер не прижат к низу страницы, а находится там, где ему и положено — после основного блока сайта. Это смотрится не очень красиво.
Поэтому сегодня мы поговорим с вами о том, как прижать подвал сайта к нижней границе окна браузера.
Итак, к подвалу мы выставим следующие требования:
- подвал прижат к низу экрана при высоте окна браузера больше высоты страницы не зависимо от контента;
- футер находится на положенном ему месте при объеме контента больше, чем высота окна браузера;
- работает в во всех популярных браузерах;
- надежность — не зависит от сложности верстки.
Для примера возьмем простую страницу, состоящую из двух основных блоков: основного (main) и подвала (footer). Сделаем чтобы основной блок занял всю площадь окна браузера независимо от количества контента, при этом футер прижмем к низу экрана так, чтобы в браузере не появилась вертикальная полоса прокрутки. Как делаем:
Шаг 1
Делаем 2 блока: основной (main) и подвал (footer). Основной контейнер растягиваем на всю высоту экрана браузера (min-height), подвалу жестко указываем высоту (height).
При этом общая высота сайта составит высота экрана + высота подвала.
Шаг 2
Отрицательным отступом (margin-top) «въезжаем» в основной блок, чтобы высота сайта составляла только 100% высоты экрана.
При таком расположении блоков и при достаточном количестве контента (например, текста) в основном блоке, возможны накладки контента в основном блоке на подвал:
Шаг 3
Для избежания этой потенциальной проблемы, добавляем в конец основного блока пустой блок, высотой не меньше высоты подвала (а лучше немного больше, чтобы был отступ между контентом и подвалом):
Теперь, если контента будет много, он будет двигать пустой блок вниз. А это будет опускать и подвал, не давая налезть на него контенту.
Смотрим как это выглядит в коде:
| <html> <head> <title>Футер прижат к низу</title> <style type="text/css"> * {margin: 0; padding: 0;} /* обнуляем отступы */ body { background: #fff;} html,body { height: 100%; /* задаем высоту тела документа */} .main { /* основной блок, который должен растянуться до подвала */ background: #999; /* цвет фона основного блока (для наглядности) */ min-height: 100%; /* задаем минимальную высоту основного блока */} * html .main { /* хак для ie6 */ height: 100%; /* для ие6, т.к. не понимает min-height */} .hFooter { /* это распорка в основном блоке - резервируем место для подвала */ height: 40px; /* высота нашего подвала */} .footer { /* подвал */ background: #0000CC; /* цвет фона подвала (для наглядности) */ color: #fff; height: 40px; /* высота подвала */ margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвала, чтобы четко вписаться в размер экрана */} </style> </head> <body> <div> Это основной блок <div></div> </div> <div>Это подвал</div> </body> </html> |
Результат этого примера.
Заметка: при использовании блочной верстки и плавающих основных блоков (колонок) для .hFooter следует добавить clear: both, чтобы подвал расположился под колонками.:
| .hFooter { clear: both; height: 40px;} |
Если Вы уже немного освоили CSS, тогда может возникнуть вопрос: «Зачем использовать дополнительный элемент, если можно воспользоваться padding-bottom?».
Ответ — так просто его тут использовать нельзя, так как размер блока равен его размерам + ширина внутренних отступов + ширина границ. Связка min-height: 100% и padding-bottom даст высоту сайта больше высоты экрана. В итоге даже при отсутствии контента вовсе, подвал будет за пределами экрана.
Недостаток данного приема — это использование дополнительного пустого элемента hFooter. В реальных условиях (когда содержимое сайта не пустое и применяется блочная верстка) этого можно избежать применив метод clearfix — этот прием поможет очистить поток без использования дополнительного элемента, а чтобы контент не налез на футер, пропишем в колонках padding-bottom.
Проблемы с z-слоями
В вышеописанном приеме футер поднимали отрицательным отступом вверх. При этом возникает потенциальная проблема с z-слоями. Например, нам нужно показать всплывающее окно (пускай это будет div), которое будет позиционироваться относительно контейнера main.
HTML:
| <div> [...] <div> [...] </div> </div> <div> [...] </div> |
CSS:
| .main { position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */ z-index: 1; /* z-index меньше чем у футера, чтобы тот был виден */} .popup { position: absolute; z-index: 100; [...]} .footer { height: 50px; margin-top: -50px; position: relative; /* чтобы можно было задать z-index */ z-index: 2; /* больше, чем у main чтобы быть видимым */} |
Все хорошо до тех пор пока у нас не пересекаются всплывающее окно и подвал (а такая ситуация довольно часто возникает) — вот тут начинаются проблемы. Не смотря на то, что у всплывающего окна наибольший z-index, оно будет перекрываться футером, т.к. родитель popup имеет z-index меньший, чем у подвала:
В этом случае нужно искать возможность позиционировать окно не относительно main, а относительно какого-либо другого дочернего элемента, который расположен внутри main. Таким образом, избавимся от указания z-index для main и footer. Но такой вариант не всегда возможен, потому рассмотрим второй вариант прижатия футера.
Решение 2 — абсолютное позиционирование
Идея похожа на решение 1:
- Растягиваем основной блок на всю высоту экрана;
- Резервируем место для подвала;
- Относительно основного блока позиционируем подвал в самый низ абсолютным позиционированием.
HTML:
| <div> [...] <div> [...] </div> </div> |
CSS:
| html, body { height: 100%;} .main { min-height: 100%; position: relative; /* чтобы дочерние элементы позиционировались относительно этого блока */} .footer { height: 50px; position: absolute; left: 0; bottom: 0; width: 100%;} * html .footer { bottomy:expression(parentNode.offsetHeight % 2 ? style.bottom="-1px" : style.bottom="0px"); /* хак для ие6, у которого есть косяк со смещением на 1px */} |
Такой подход решит проблему с всплывающими окнами, т.к. и footer и popup будут иметь общего родителя, а значит с z-слоями сюрпризов не будет.
Недостаток обоих методов — оба метода годятся только для фиксированного по высоте подвала.
На сегодня все. Теперь Вы знаете, как прижать футер к низу экрана разными способами и какие при этом могут возникнуть проблемы.
Подписываемся на обновления и ждем новых интересных публикаций. Пока.
free-site-master.ru
